<template>
  <RouterLink :to="`/detail/${goods.id}`" class="goods-item">
    <img :src="goods.picture" alt="" />
    <p class="name" :title="goods.name">{{ goods.name }}</p>
    <p class="desc" :title="goods.desc">{{ goods.desc }}</p>
    <p class="price">￥{{ goods.price }}</p>
  </RouterLink>
</template>

<script setup>
defineProps({
  goods: {
    type: Object,
    required: true
  }
})
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  border: 1px solid #f1f1f1;
  border-radius: 5px;

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }

  img {
    width: 180px;
    height: 180px;
  }
  //文本截断
  .name, .desc {
    width: 160px;  // 设置固定宽度
    white-space: nowrap;  // 防止文本换行
    overflow: hidden;  // 隐藏溢出的文本
    text-overflow: ellipsis;  // 显示省略号
  }
  .name {
    font-size: 16px;
    margin-top: 10px;
    color: #333;
  }
  .desc {
    font-size: 14px;
    margin-top: 5px;
    color: #666;
  }
  .price {
    font-size: 18px;
    margin-top: 10px;
    color: #f60;
    font-weight: bold;
  }
}
</style>
